// 这个 main.js 是我们项目的JS入口文件

// 1.导入Jquery
// import *** from *** 是ES6导入模块的方式
// 由于ES6的代码，太高级了，浏览器解析不了，所以，这一行会报错
import $ from 'jquery'
// const $ = require('jquery')

// 使用 import 语法，导入css样式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'
// 注意：webpack默认只能打包处理js类型的文件，无法处理其他非js文件；
// 如果要处理非js类型的文件，我们需要手动安装一些合适的loader加载器；
// 1、如果想要处理css文件，需要安装 cnpm i style-loader css-loader -D
// 2、打开 webpack.config.js 这个配置文件，在里面新增一个配置节点，叫做module，
//    它是一个对象，在这个module对象身上，有个rules属性，这个rules属性是个数组；
//    这个数组中，存放了所有第三方文件的匹配和处理规则；

// 注意：webpack 处理第三方文件类型的过程：
// 1> 发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方loader规则；
// 2> 如果能找到对应的规则，就会调用对应的loader处理这个文件类型；
// 3> 在调用loader的时候，是从后往前调用的；
// 4> 当最后的一个loader调用完毕，会把处理的结果，直接交给webpack运行，最终输出到bundle.js
//    中去；


$(function() {
    $('li:odd').css('backgroundColor', 'yellow')
    $('li:even').css('backgroundColor', function() {
        return '#' + 'D97634'
    })
})


// 经过刚才的演示，Webpack 可以做什么事情？？？
// 1、webpack 能够处理JS文件之间的相互依赖关系；
// 2、webpack 能够处理JS的兼容问题，把高级的、浏览器不识别的语法，转为低级的、浏览器能
//    正常识别的语法

// 刚才运行的命令的格式： 
// webpack a.js -output-filename bundle.js -output-path . -mode development

// 使用 webpack-dev-server 这个工具，来实现自动打包编译的功能
// 1、运行 cnpm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖 
// 2、安装完毕后，这个工具的用法，和webpack命令的用法，完全一样
// 3、由于，我们是在项目中本地安装的 webpack-dev-server，所以，无法把它当作脚本命令，
//    在powershell 终端中直接运行（只有那些安装到 全局 -g 的工具，才能在终端中正常执行）
// 4、注意：webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，
//    必须安装 webpack（cnpm i webpack -D）
// 5、webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；
//    而是，直接托管到了电脑的内存中，所以我们在项目根目录中，根本找不到这个打包好的 bundle.js；
// 6、我们可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们项目
//    根目录中，虽然我们看不到它，但是，可以认为和 dist src node_modules 平级，有一个看见的文件，叫做 bundle.js；
// 7、webpack-dev-server的配置方式
//    1> 在 package.json 中的 scripts 中添加  "dev": "webpack-dev-server --open --port 8080 --contentBase src --hot"
//       这种方式是推荐的方式
//    2> 